<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>jqGrid demo</title>
    <link type="text/css" rel="stylesheet" href="static/jquery-ui-1.11.1/jquery-ui.min.css"/>
    <link type="text/css" rel="stylesheet" href="static/jquery.jqGrid-4.4.3/css/ui.jqgrid.css"/>
    <script type="text/javascript" src="static/jquery.jqGrid-4.4.3/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="static/jquery-ui-1.11.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="static/jquery.jqGrid-4.4.3/js/jquery.jqGrid.min.js"></script>
    <!--<script type="text/javascript" src="static/jquery.jqGrid-4.4.3/js/i18n/grid.locale-en.js"></script>-->
    <script type="text/javascript" src="static/jquery.jqGrid-4.4.3/js/i18n/grid.locale-cn.js"></script>
    <script type="text/javascript">
        $(function () {
            loadJqGrid();

            $(".autoComplete").bind('keyup focus', function () {
                var $container = $("<div/>");
                $(this).next().empty().show().append($container);
                var $grid = $("<table id='myGrid'/>");
                var $pager = $("<div id='myPager'/>");
                $container.append($grid);
                $container.append($pager);
                $grid.jqGrid({
                    url: "/resultSet",
                    datatype: "json",
                    postData: {},
                    prmNames: {
                    },
                    colNames: ["id", "name", "phone", "email"],
                    colModel: [
                        {name: "id", width: 40, align: "center"},
                        {name: "name", align: "center"},
                        {name: "phone", align: "center"},
                        {name: "email", align: "center"}
                    ],
                    loadtext: "loading person informations",
                    rowNum: 10,
                    pager: "#myPager",
                    viewrecords: true,
                    autowidth: true,
                    height: '100%',
                    jsonReader: {
                        root: "results",
                        page: "currentPage",
                        total: "pages",
                        records: "total",
                        repeatitems: false
                    },
                    ondblClickRow: function (rowId, iRow, iCol, event) {
                        alert(rowId);
                    }
                });
            });
        });

        function loadJqGrid() {
            $("#grid").jqGrid({
                caption: "jqGrid demo",
                url: "/resultSet",
                datatype: "json",
                postData: {},
                prmNames: {
                },
                colNames: ["id", "name", "phone", "email"],
                colModel: [
                    {name: "id", width: 40, align: "center"},
                    {name: "name", align: "center"},
                    {name: "phone", align: "center"},
                    {name: "email", align: "center"}
                ],
                loadtext: "loading person informations",
                rowNum: 10,
                pager: "#pager",
                viewrecords: true,
                autowidth: true,
                height: '100%',
                jsonReader: {
                    root: "results",
                    page: "currentPage",
                    total: "pages",
                    records: "total",
                    repeatitems: false
                },
                ondblClickRow: function (rowId, iRow, iCol, event) {
                    var rowData = $("#grid").getRowData(rowId);
                    alert(JSON.stringify(rowData));
                }
            });
            $("#grid").trigger('reloadGrid');
        }
    </script>
</head>
<body>
<h1>jqGrid demo</h1>

<div>
    <table id="grid"></table>
    <div id="pager"></div>
</div>
<div>
    <button type="button" onclick="loadJqGrid()">LOAD</button>
</div>

<div>
    <input type="text" class="autoComplete"/>

    <div style="width: 400px;height: 300px;border: 1px solid #000000;display: none;z-index: 100;position: absolute"></div>

    <h2>auto complete</h2>

    <h2>auto complete</h2>

    <h2>auto complete</h2>

    <h2>auto complete</h2>
</div>
</body>
</html>